import React, { memo } from "react";
import CommonTitle from "@/components/common_title";
import { HotRecommendWrapper, HotRecommendSongs, Content } from "./style";
import PropTypes from "prop-types";
import CommonSong from "@/components/common-song";

const HotRecommend = memo(function HotRecommend(props) {
  const { hotRecommends } = props;
  return (
    <HotRecommendWrapper>
      <CommonTitle titleName="热门推荐" keywords={["华语", "流行", "摇滚", "民谣", "电子"]} />
      <Content>
        {hotRecommends.slice(0, 8).map(item => {
          return (
            <HotRecommendSongs key={item.id}>
              <CommonSong picUrl={item.picUrl} playCount={item.playCount} id={item.id} />
              <a href="todo" className="describe">
                {item.name}
              </a>
            </HotRecommendSongs>
          );
        })}
      </Content>
    </HotRecommendWrapper>
  );
});

HotRecommend.propTypes = {
  hotRecommends: PropTypes.array,
};

HotRecommend.defaultProps = {
  hotRecommends: [],
};

export default HotRecommend;
